<template>
  <div ref="echartsDom" class="echarts-box"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    recordList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    recordList: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })

    window.addEventListener('resize', () => {
      this.chart && this.chart.resize()
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.chart && this.chart.resize()
    })
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.echartsDom)
      this.setOptions(this.recordList)
    },
    setOptions({ subjectList, studyNumList } = {}) {
      this.chart.setOption({
        grid: {
          top: '4%',
          left: 0,
          right: '2%',
          bottom: 0,
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          // data: [
          //   '语文',
          //   '数学',
          //   '英语',
          //   '道德与法治',
          //   '科学',
          //   '音乐',
          //   '美术'
          // ],
          data: subjectList,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#a8a8a8',
              width: 1,
              type: 'dashed'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 16,
            textStyle: {
              fontFamily: 'PingFang SC',
              color: '#a8a8a8',
              fontSize: 20
            }
          }
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            color: '#a8a8a8',
            fontSize: 20,
            fontFamily: 'PingFang SC'
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#a8a8a8',
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#a8a8a8'
            }
          }
        }],
        series: [{
          type: 'bar',
          // data: [480, 370, 400, 450, 340, 280, 330],
          data: studyNumList,
          barWidth: 54, // 柱子宽度
          // barGap: 1, // 柱子之间间距
          itemStyle: {
            normal: {
              // background: linear-gradient(180.00deg, #004fff 0%, #d8e4ff80 100%);
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#004fff'
              }, {
                offset: 1,
                color: '#d8e4ff80'
              }]),
              opacity: 1
            }
          }
        }]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.echarts-box {
  height: 318px;
}
</style>
